<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="/vue_basic/js/vue.js"></script>
    <title>键盘事件</title>
</head>
<body>
<!-- 
    1.Vue中常用的按健别名:
        回车 =>enter
        删除=>delete(捕获“删除”和退格”健)退出=>esE
        空格=>space
        换行=>tab(特殊,必须配合keydown去使用)上=> up
        下 =>down左=>left右=> right
    2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case(短横线命名)
    3.系统修饰键（用法特殊）:ctrl、alt、shift、meta
        (1).配合keyup使用:按下修饰健的同时，再按下其他健，随后释放其他键，事件才被触发。
        (2).配合keydown使用:正常触发事件。
    4.也可以使用keyCode去指定具体的按键（不推荐)
    5.Vue.config.keyCodes.自定义键名=键码，可以去定制按键别名
     -->

    <div id="root">
        <h2>欢迎,{{name}}</h2>
                                        <!-- 默认提示      -->
                                        <!-- KeyDown：用户摁下摁键时发生
                                        KeyPress：用户摁下摁键，并且产生一个字符时发生
                                        KeyUp： 用户释放某一个摁键时触发 -->
        <input type="text" placeholder="按下回车提示输入" @keyup="showInfo"><br>
        <input type="text" placeholder="按下回车提示输入" @keyup.caps-lock="showInfo"><br>
        <!-- 自己定义一个按键 -->
        <input type="text" placeholder="按下回车提示输入" @keyup.huiche="showInfo">
        <!-- ctry+y触发事件 -->
<input type="text" placeholder="按下回车提示输入" @keyup.ctrl.y="showInfo"><br>
    </div>
</body>
<script>
    //自己定义一个按键
    Vue.config.keyCodes.huiche = 13
    
    new Vue({
        el:"#root",
        data:{
            name:'吴亦凡',
        },
        methods:{
            showInfo(e){
                console.log(e.key);
                if(e.keyCode !== 13){
                    console.log(e.target.value);
                }
                
            }, 
        }
        
    })
</script>
</html>